<template>
  <div class="min-h-screen overflow-y-auto">
    <van-swipe
      :autoplay="3000"
      lazy-render
      class="bg-teal-500 text-base text-right"
      :class="$style.swipe"
      @change="handleSwipeChange"
    >
      <van-swipe-item v-for="(image, index) in images" :key="`swipe-${index}`">
        <van-image :src="image" fit="cover" class="w-full h-full" />
      </van-swipe-item>
      <template #indicator>
        <div
          class="absolute bottom-base left-2/4 transform -translate-x-1/2 w-2/4 h-1.5 rounded-3"
          :style="{ boxShadow: '0 6px 12px rgba(0,0,0,0.25)' }"
        >
          <div
            class="absolute left-0 top-0 w-full h-full bg-white opacity-30 rounded-3"
          />
          <div
            class="absolute transition-all duration-200 left-0 top-0 h-full rounded-3 bg-white"
            :style="{
              width: `${((current + 1) / images.length) * 100}%`,
            }"
          ></div>
        </div>
      </template>
    </van-swipe>
  </div>
</template>

<script>
import { toRefs, reactive } from 'vue';
export default {
  setup() {
    const data = reactive({
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg',
        'https://img.yzcdn.cn/vant/apple-3.jpg',
        'https://img.yzcdn.cn/vant/apple-4.jpg',
      ],
      current: 0,
    });
    function handleSwipeChange(index) {
      data.current = index;
    }
    return {
      ...toRefs(data),
      handleSwipeChange,
    };
  },
};
</script>

<style lang="less" module>
.swipe {
  height: 300px;
  &-indicator {
  }
}
</style>
